const IMG_BASE_URL = './assets/images/*.png';


const init = () => {
    imgLoader();
    eventHandler();
}

function $(val) {
    const el = document.querySelectorAll(val);
    if (el[1]) {
        return el;
    } else {
        return el[0];
    }
}


function getImageChangeFn(img_url) {
    //闭包保存当前图片索引值，避免新图片与当前图片一致
    let index = 1;

    return function changeImg() {
        const num = Math.floor(Math.random() * 4 + 1);
        if (num === index) return changeImg();
        index = num;
        const img = IMG_BASE_URL.replace('*', num);
        $('img.verify-image').src = img;
    }

}

function imgLoader() {
    const changeImg = getImageChangeFn(IMG_BASE_URL);
    const changeBtn = $('.change');
    changeImg();
    //切换图片
    changeBtn.onclick = () => changeImg();
}

function imgHandler(image) {
    const initial_deg = Math.floor(Math.random() * 270 - 45 + 90);
    image.style.transform = `rotate(${initial_deg}deg)`;

    function rotateImg(deg) {
        image.style.transform = `rotate(${initial_deg + deg}deg)`;
    }

    function judgeImg(deg) {
        const rest = (deg + initial_deg) % 360;
        if (rest <= 10 && rest >= 0) {
            return true;
        } else if (rest <= 360 && rest >= 350) {
            return true;
        } else {
            return false;
        }
    }
    function resetImg() {
        image.style.transform = `rotate(${initial_deg}deg)`;
    }

    return [
        rotateImg,
        judgeImg,
        resetImg
    ]
}



function eventHandler() {
    const image = $('img.verify-image');
    const sliderRegion = $('.slider-region');
    const slider = $('.slider');
    const icon_success = $('.icon-success');
    const icon_error = $('.icon-error');
    const verify_btn = $('.verify-btn');
    const verify_container = $('.verify-session');
    const cover = $('.cover');
    let mouseStart;
    let isOn = false;
    const [
        rotateImg,
        judgeImg,
        resetImg
    ] = imgHandler(image);
    const sliderRegionWidth = getComputedStyle(sliderRegion).width.replace('px', '');
    const sliderWidth = getComputedStyle(slider).width.replace('px', '');
    const distance = sliderRegionWidth - sliderWidth;

    let rotDeg;

    verify_btn.addEventListener('click', () => {
        verify_container.style.display = 'flex';
        cover.style.display = 'block';
    })



    slider.addEventListener('mousedown', (e) => {

        mouseStart = e.x;

        isOn = true;
    })
    document.addEventListener('mouseup', (e) => {

        if (isOn) {

            isOn = false;
            const isOk = judgeImg(rotDeg);

            if (isOk) {
                slider.removeEventListener('mousemove', removeSlider);
                image.style.filter = 'brightness(0.5)';
                icon_success.style.display = 'inline';
                verify_btn.style.display = 'none';
                document.body.innerHTML += '成功力';
                setTimeout(() => {
                    console.log(1);
                    $('.verify-session').style.display = 'none';
                    $('.cover').style.display = 'none';
                }, 1000)



            } else {
                image.style.filter = 'brightness(0.5)';
                icon_error.style.display = 'inline';

                slider.style.left = 0 + 'px';
                setTimeout(() => {
                    image.style.filter = 'brightness(1)';
                    icon_error.style.display = 'none';
                    resetImg();
                }, 1000)

            }
        }


    })

    slider.addEventListener('mousemove', removeSlider);



    function removeSlider(e) {
        if (isOn) {
            const mouseEnd = e.x;
            const moveDistance = mouseEnd - mouseStart;
            slider.style.left = moveDistance + 'px';
            if (moveDistance >= distance) {
                slider.style.left = distance + 'px';

            } else if (moveDistance <= 0) {
                slider.style.left = 0 + 'px';
            }
            const dis = slider.offsetLeft;
            const rate = ((dis / distance) + '').slice(0, 4);
            rotDeg = rate * 360;
            rotateImg(rotDeg);
        }
    }



}



init();
